<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="fz15 fw">服务器</div>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <div class="dis_f">
      <!-- <div
        v-for="item in net_list"
        :key="item.id"
        class="w150 h50 bac_f mr15 df fd bs4 ac jc radius12 p_re net-box"
      >
        <div class="fw">{{ item.title }}</div>
        <div class="fz13">{{ item.ip }}</div>
        <CircleCloseFilled
          class="p_ab"
          @click="delNet"
          style="
            width: 1em;
            height: 1em;
            margin-right: 8px;
            top: 0;
            right: -8px;
          "
        />
      </div> -->
      <div class="w150 h50 bac_f mr15 df fd bs4 ac jc radius12 p_re net-box">
        <div class="fw">西山执法网</div>
        <div class="fz13">129.10.01</div>
        <CircleCloseFilled
          class="p_ab"
          @click="delNet"
          style="
            width: 1em;
            height: 1em;
            margin-right: 8px;
            top: 0;
            right: -8px;
          "
        />
      </div>
      <div>
        <div
          class="w150 h50 bac_f bs4 dis_f jc radius12"
          @click="dialogFormVisible = true"
        >
          <img class="w32" src="../../assets/img/add_icon.png" alt="" />
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加服务器">
      <el-form :model="form">
        <el-form-item label="服务器名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="本地通信ip" :label-width="formLabelWidth">
          <el-input v-model="form.ip" autocomplete="off" />
        </el-form-item>
        <el-form-item label="设备层级" :label-width="formLabelWidth">
          <el-input v-model="form.layer" autocomplete="off" />
        </el-form-item>
        <el-form-item label="获取系统时间" :label-width="formLabelWidth">
          <el-switch v-model="form.system_time" />
        </el-form-item>
        <el-form-item label="CPU监测" :label-width="formLabelWidth">
          <el-switch v-model="form.cpu_watch" />
        </el-form-item>
        <el-form-item label="内存监测" :label-width="formLabelWidth">
          <el-switch v-model="form.ram_watch" />
        </el-form-item>
        <el-form-item label="网络流量监测" :label-width="formLabelWidth">
          <el-switch v-model="form.netflow_watch" />
        </el-form-item>
        <el-form-item label="硬盘监测" :label-width="formLabelWidth">
          <el-select
            v-model="form.disk_watch"
            class="m-1"
            multiple
            placeholder="选择硬盘"
            size="large"
          >
            <el-option
              v-for="item in options_1"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="进程监测" :label-width="formLabelWidth">
          <el-select
            v-model="form.process_watch"
            class="m-2"
            multiple
            placeholder="选择进程"
            size="large"
          >
            <el-option
              v-for="item in options_2"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件夹监测" :label-width="formLabelWidth">
          <el-select
            v-model="form.floder_watch"
            class="m-3"
            multiple
            placeholder="选择文件夹"
            size="large"
          >
            <el-option
              v-for="item in options_3"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="网络通断监测" :label-width="formLabelWidth">
          <el-select
            v-model="form.net_connect_watch"
            class="m-3"
            multiple
            placeholder="选择ip"
            size="large"
          >
            <el-option
              v-for="item in options_4"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="主备机" :label-width="formLabelWidth">
          <el-switch v-model="form.spare_machine" />
          <el-select
            style="margin-left: 20px"
            v-model="form.net_connect_watch"
            class="m-4"
            multiple
            placeholder="选择备用机"
            size="large"
          >
            <el-option
              v-for="item in options_5"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addNet"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import httpApis from "../../http/index";
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const open2 = () => {
  ElMessage({
    message: "添加成功",
    type: "success",
  });
};
const form = reactive({
  title: "",
  ip: "",
  layer: "",
  system_time: false,
  cpu_watch: false,
  ram_watch: false,
  netflow_watch: false,
  disk_watch: "",
});
const options_1 = [
  {
    value: "C盘",
  },
  {
    value: "D盘",
  },
  {
    value: "E盘",
  },
];
const options_2 = [
  {
    value: "进程1",
  },
  {
    value: "进程2",
  },
  {
    value: "进程3",
  },
];
const options_3 = [
  {
    value: "文件夹1",
  },
  {
    value: "文件夹2",
  },
  {
    value: "文件夹3",
  },
];
const options_4 = [
  {
    value: "IP1",
  },
  {
    value: "IP2",
  },
  {
    value: "IP3",
  },
];
const options_5 = [
  {
    value: "备用机1",
  },
  {
    value: "备用机2",
  },
  {
    value: "备用机3",
  },
];

const net_list = ref([]);
function addNet() {
  httpApis.UserApi.add(form).then((res) => {
    dialogFormVisible.value = false;
    open2();
  });
}
function netList() {
  httpApis.UserApi.list().then((res) => {
    net_list.value = res.data.data;
    console.log(net_list.value);
  });
}
function delNet() {
  console.log("del");
}
onMounted(() => {
  netList();
});
</script>

<style lang="scss" scoped>
.net-box {
  svg {
    display: none;
  }
  &:hover svg {
    display: block;
  }
}
</style>

